<template>
  <div class="node-panel">
    <h4 class="panel-title">节点类型</h4>
    <div>
      <div
        v-for="node in nodeTypes"
        :key="node.name + node.type"
        class="draggable-node"
        draggable="true"
        @dragstart="onDragStart(node, $event)"
      >
        <span class="node-name">{{ node.name }}</span>
        <span class="node-type">{{ node.type }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const nodeTypes = [
  { type: '用户操作', name: '下单' },
  { type: '用户操作', name: '选择物流' },
  { type: '用户操作', name: '确认收货' },
  { type: '用户操作', name: '申请退款' },
  { type: '财务', name: '付款复核' },
  { type: '财务', name: '退款处理' },
  { type: '财务', name: '发票开具' },
  { type: '仓库', name: '商品入库' },
  { type: '仓库', name: '办理出库' },
  { type: '仓库', name: '商品签收' },
  { type: '仓库', name: '库存盘点' },
  { type: '物流', name: '快递取件' },
  { type: '物流', name: '物流跟踪' },
  { type: '物流', name: '配送完成' },
  { type: '系统', name: '开始' },
  { type: '系统', name: '结束' },
  { type: '系统', name: '数据验证' },
  { type: '系统', name: '日志记录' },
]

function onDragStart(node: any, event: DragEvent) {
  event.dataTransfer?.setData('nodeType', JSON.stringify(node))
}
</script>

<style scoped>
.node-panel {
  width: 180px;
  background: #fff;
  border-right: 1px solid #eee;
  padding: 16px;
  height: 100%;
}
.panel-title {
  margin: 0 0 12px 0;
  color: #333;
}
.draggable-node {
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #f3f4f6;
  border-radius: 6px;
  color: #222;
  font-size: 15px;
  cursor: grab;
  border-left: 4px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.draggable-node:hover {
  background: #e5e7eb;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.draggable-node:active {
  cursor: grabbing;
  transform: translateY(0);
}
.node-name {
  font-weight: 500;
}
.node-type {
  font-size: 12px;
  color: #888;
  margin-left: 8px;
}
</style> 